JavaScript Nullish Coalescing: En Omfattande Guide till Tilldelning av Standardvärden

I JavaScript är det en vanlig uppgift att tilldela standardvärden. Traditionellt har utvecklare använt OR-operatorn (||) för detta ändamål. Men nullish coalescing-operatorn (??), som introducerades i ECMAScript 2020, erbjuder ett mer precist och tillförlitligt sätt att hantera tilldelning av standardvärden, särskilt när man hanterar null- eller undefined-värden. Denna guide ger en djupdykning i nullish coalescing-operatorn, och utforskar dess syntax, beteende, skillnader från OR-operatorn och praktiska användningsfall.

Vad är Nullish Coalescing?

Nullish coalescing-operatorn (??) är en logisk operator som returnerar sin högra operand när dess vänstra operand är null eller undefined. Annars returnerar den sin vänstra operand. Enkelt uttryckt tillhandahåller den ett standardvärde endast när en variabel är strikt null eller undefined.

Syntax

Syntaxen för nullish coalescing-operatorn är enkel:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Här är leftOperand variabeln eller uttrycket du vill kontrollera för null eller undefined, och rightOperand är standardvärdet du vill tilldela om leftOperand faktiskt är null eller undefined.

Exempel

Tänk på följande exempel:

            const username = null ?? "Guest";
console.log(username); // Output: Guest

const age = undefined ?? 25;
console.log(age); // Output: 25

const city = "London" ?? "Unknown";
console.log(city); // Output: London
            

              
                Copy
              
            
          

I detta exempel tilldelas username standardvärdet "Guest" eftersom det ursprungligen är null. På samma sätt tilldelas age värdet 25 eftersom det börjar som undefined. Däremot behåller city sitt ursprungliga värde, "London", eftersom det varken är null eller undefined.

Nullish- vs. Falsy-värden

Det är avgörande att förstå skillnaden mellan nullish- och falsy-värden i JavaScript. Ett nullish-värde är antingen null eller undefined. Ett falsy-värde är ett värde som betraktas som falskt när det påträffas i ett booleskt sammanhang. Falsy-värden inkluderar:

• null
• undefined
• 0 (noll)
• NaN (Not a Number)
• '' (tom sträng)
• false

Den avgörande skillnaden är att nullish coalescing-operatorn endast kontrollerar för null eller undefined, medan OR-operatorn (||) kontrollerar för vilket falsy-värde som helst.

Skillnaden mellan ?? och ||

OR-operatorn (||) är en logisk OR-operator som returnerar den högra operanden om den vänstra operanden är falsy. Även om den kan användas för att tilldela standardvärden, kan den leda till oväntat beteende när man hanterar värden som 0 eller en tom sträng.

Exempel: Fallgroparna med ||

            const quantity = 0 || 10; // Vi avser ett standardvärde på 10 om quantity saknas
console.log(quantity); // Output: 10 (Oväntat!) eftersom 0 är falsy

const text = '' || 'Default Text'; //Vi avser en standardtext om texten saknas
console.log(text); // Output: Default Text (Oväntat!) eftersom '' är falsy
            

              
                Copy
              
            
          

I det första exemplet avsåg vi att tilldela en standardkvantitet på 10 endast om quantity saknades (null eller undefined). Men eftersom 0 är ett falsy-värde, tilldelade OR-operatorn felaktigt standardvärdet. På samma sätt gör den tomma strängen att standardtexten visas även om strängen finns (men är tom).

Använda ?? för precision

Låt oss skriva om föregående exempel med nullish coalescing-operatorn:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (Korrekt!)

const text = '' ?? 'Default Text';
console.log(text); // Output: '' (Korrekt!)
            

              
                Copy
              
            
          

Nu är resultatet som förväntat. Nullish coalescing-operatorn kontrollerar endast för null eller undefined, så 0 och '' behandlas som giltiga värden, och deras ursprungliga värden bevaras.

Användningsfall för Nullish Coalescing

Nullish coalescing-operatorn är användbar i olika scenarier där du behöver tillhandahålla standardvärden endast när en variabel är strikt null eller undefined. Här är några vanliga användningsfall:

1. Hantera valfria funktionsparametrar

När du definierar en funktion med valfria parametrar kan du använda nullish coalescing-operatorn för att tillhandahålla standardvärden om parametrarna inte anges.

            function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Output: Hello, User!
greet("Alice"); // Output: Hello, Alice!
greet("Bob", "Greetings"); // Output: Greetings, Bob!
            

              
                Copy
              
            
          

2. Ställa in standardkonfigurationsalternativ

När du arbetar med konfigurationsobjekt kan du använda nullish coalescing-operatorn för att säkerställa att standardvärden används om vissa konfigurationsalternativ inte specificeras.

            const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Standard-timeout på 10 sekunder
  const retries = options.retries ?? 5; // Standard 5 försök
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Output: Timeout: 5000, Retries: 3
fetchData({}); // Output: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Output: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Åtkomst till nästlade objektegenskaper

Vid åtkomst till egenskaper i nästlade objekt kan nullish coalescing-operatorn kombineras med optional chaining (?.) för att tillhandahålla standardvärden om några av de mellanliggande egenskaperna är null eller undefined.

            const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Output: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Output: Unknown
            

              
                Copy
              
            
          

4. Arbeta med API:er och extern data

När man hämtar data från API:er eller externa källor kan nullish coalescing-operatorn användas för att tillhandahålla standardvärden om vissa datafält saknas eller har null- eller undefined-värden. Tänk dig att hämta användardata från olika regioner. Anta att vissa regioner kanske inte inkluderar fältet `country` i sina användardata.

            async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Fel vid hämtning av användardata:", error);
  }
}

// Simulerar olika API-svar:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// För att testa detta skulle du behöva ett faktiskt API eller en mock fetch.
// För demonstrationsändamål, låt oss simulera svaren:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Oväntad URL");
};

getUserData(123); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT
            

              
                Copy
              
            
          

Operatorprioritet

Nullish coalescing-operatorn har relativt låg operatorprioritet. Den är lägre än OR- (||) och AND- (&&) operatorerna. Därför är det viktigt att använda parenteser för att explicit definiera operationsordningen när man kombinerar nullish coalescing-operatorn med andra logiska operatorer. Att inte göra det kan resultera i syntaxfel eller oväntat beteende.

Exempel: Använda parenteser för tydlighet

            // Utan parenteser (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Med parenteser (Korrekt)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Output: null
            

              
                Copy
              
            
          

I det första exemplet resulterar avsaknaden av parenteser i ett SyntaxError eftersom JavaScript-motorn inte kan avgöra den avsedda operationsordningen. Genom att lägga till parenteser talar vi explicit om för motorn att utvärdera nullish coalescing-operatorn först. Det andra exemplet är giltigt; dock är resultatet annorlunda eftersom ||-uttrycket utvärderas först.

Webbläsarkompatibilitet

Nullish coalescing-operatorn (??) är en relativt ny funktion, så det är viktigt att tänka på webbläsarkompatibilitet, särskilt om du riktar dig mot äldre webbläsare. De flesta moderna webbläsare stöder nullish coalescing-operatorn, inklusive:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Om du behöver stödja äldre webbläsare kan du använda en transpiler som Babel för att konvertera din kod till en kompatibel version av JavaScript. Babel kommer att omvandla ??-operatorn till motsvarande JavaScript-kod som fungerar i äldre miljöer.

Bästa praxis

Här är några bästa praxis för att använda nullish coalescing-operatorn effektivt:

• Använd ?? för nullish-kontroller: Använd nullish coalescing-operatorn (??) när du specifikt vill tillhandahålla ett standardvärde endast när en variabel är null eller undefined.
• Använd parenteser för komplexa uttryck: När du kombinerar nullish coalescing-operatorn med andra logiska operatorer, använd parenteser för att tydligt definiera operationsordningen.
• Tänk på webbläsarkompatibilitet: Kontrollera webbläsarkompatibilitet och använd en transpiler om det behövs för att stödja äldre webbläsare.
• Använd konsekvent: Använd ?? där det är lämpligt för en mer förutsägbar kodningsstil i hela projektet.
• Kombinera med optional chaining: Använd ?? tillsammans med optional chaining ?. för att säkert komma åt och tilldela standardvärden till nästlade egenskaper i objekt.

Globala överväganden

När du utvecklar för en global publik, tänk på följande punkter relaterade till tilldelning av standardvärden:

• Lokalisering: Standardvärden kan behöva lokaliseras baserat på användarens språk eller region. Till exempel en standardvalutasymbol eller ett datumformat.
• Kulturella normer: Vissa standardvärden kan behöva justeras baserat på kulturella normer. Till exempel kan ett standardhälsningsmeddelande behöva vara annorlunda i olika kulturer.
• Tillgänglighet: Se till att standardvärden är tillgängliga och förståeliga för användare med funktionsnedsättningar. Tillhandahåll tydliga och beskrivande etiketter för standardvärden i användargränssnitt.
• Tidszoner och datum: När du arbetar med datum och tider, använd lämpliga tidszoner och datumformat för att säkerställa att standardvärden visas korrekt för användare i olika regioner.

Exempel: Lokalisering med Nullish Coalescing

Låt oss säga att du vill visa ett standardvälkomstmeddelande på olika språk baserat på användarens språkkod. Du kan använda nullish coalescing-operatorn för att tillhandahålla ett standardmeddelande om ett lokaliserat meddelande inte är tillgängligt.

            function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Använder engelska som standard om språkkoden inte hittas
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Standardinställning till engelska)
            

              
                Copy
              
            
          

Slutsats

Nullish coalescing-operatorn (??) är ett värdefullt tillskott till JavaScript-språket. Den erbjuder ett mer precist och tillförlitligt sätt att tilldela standardvärden jämfört med OR-operatorn (||), särskilt när man hanterar värden som 0 eller tomma strängar. Genom att förstå dess syntax, beteende och användningsfall kan du skriva renare, mer underhållbar kod som korrekt hanterar tilldelning av standardvärden. Kom ihåg att överväga webbläsarkompatibilitet, operatorprioritet och globala aspekter när du använder nullish coalescing-operatorn i dina projekt.

Genom att följa de bästa praxis som beskrivs i den här guiden kan du effektivt utnyttja nullish coalescing-operatorn för att förbättra kvaliteten och tillförlitligheten i din JavaScript-kod, vilket gör den mer robust och lättare att förstå. Kom ihåg att alltid prioritera tydlighet och underhållbarhet i din kod, och nullish coalescing-operatorn kan vara ett kraftfullt verktyg för att uppnå dessa mål.